<template>
	<uni-nav-bar shadow left-icon="left" title="登录注册" @clickLeft="back" />
	<view class="auth-container">

		<view class="auth-header">
			<view class="tab-container">
				<text class="tab-item" :class="{'active': currentTab === 'login'}" @click="switchTab('login')">登录</text>
				<text class="tab-item" :class="{'active': currentTab === 'register'}"
					@click="switchTab('register')">注册</text>
			</view>
		</view>
		<view class="auth-form">
			<!-- 登录表单 -->
			<view v-if="currentTab === 'login'">
				<view class="input-group">
					<uni-icons type="person" size="20" color="#999"></uni-icons>
					<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号"
						placeholder-class="placeholder" />
				</view>
				<view class="input-group">
					<uni-icons type="locked" size="20" color="#999"></uni-icons>
					<input v-model="loginForm.password" class="input" type="password" placeholder="请输入密码"
						placeholder-class="placeholder" />
				</view>
				<button class="submit-btn" @click="handleLogin">登录</button>
				<view class="helper-links">
					<text class="link-text">忘记密码？</text>
					<text class="link-text" @click="switchTab('register')">注册新账号</text>
				</view>
			</view>

			<!-- 注册表单 -->
			<view v-if="currentTab === 'register'">
				<view class="input-group">
					<uni-icons type="person" size="20" color="#999"></uni-icons>
					<input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号"
						placeholder-class="placeholder" />
				</view>
				<view class="input-group">
					<uni-icons type="locked" size="20" color="#999"></uni-icons>
					<input v-model="registerForm.password" class="input" type="password" placeholder="请输入密码"
						placeholder-class="placeholder" />
				</view>
				<view class="input-group">
					<uni-icons type="locked" size="20" color="#999"></uni-icons>
					<input v-model="registerForm.confirmPassword" class="input" type="password" placeholder="请确认密码"
						placeholder-class="placeholder" />
				</view>

				<view class="input-group">
					<uni-icons type="auth" size="20" color="#999"></uni-icons>
					<input v-model="registerForm.nickname" class="input" type="password" placeholder="请输入昵称"
						placeholder-class="placeholder" />
				</view>

				<button class="submit-btn" @click="handleRegister">注册</button>
				<view class="helper-links">
					<text class="link-text" @click="switchTab('login')">已有账号？立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { ULogin, Uregister } from '../../api';

	const currentTab = ref('login');
	const countDown = ref(60);
	const isCountingDown = ref(false);
	const countDownText = ref('获取验证码');

	const loginForm = reactive({
		username: '',
		password: ''
	});

	const registerForm = reactive({
		username: '',
		password: '',
		confirmPassword: '',
		phone: '',
		nickname: ''
	});

	const switchTab = (tab : 'login' | 'register') => {
		currentTab.value = tab;
	};

	const handleLogin = () => {
		if (!loginForm.username || !loginForm.password) {
			uni.showToast({
				title: '请输入账号和密码',
				icon: 'none'
			});
			return;
		}
		fetchUserLogin()
		console.log('登录信息：', loginForm);
	};

	const handleRegister = () => {
		if (!registerForm.username || !registerForm.password || !registerForm.confirmPassword ||
			!registerForm.nickname) {
			uni.showToast({
				title: '请填写完整注册信息',
				icon: 'none'
			});
			return;
		}
		if (registerForm.password !== registerForm.confirmPassword) {
			uni.showToast({
				title: '两次输入的密码不一致',
				icon: 'none'
			});
			return;
		}
		// 进行注册
		fetchUserRegister()
	};

	const fetchUserRegister = async () => {
		const payload = {
			username: registerForm.username,
			password: registerForm.password,
			nickname: registerForm.nickname,
		};
		try {
			const response = await Uregister(payload);
			if (response.code === 200) {
				uni.showToast({
					title: '注册成功',
					icon: 'none'
				});
				currentTab.value = 'login'
			}
		} catch (error) {
			console.error('注册失败:', error);
		}
	}

	const fetchUserLogin = async () => {
		const payload = {
			username: loginForm.username,
			password: loginForm.password,
		};

		try {
			const response = await ULogin(payload);

			// 登录成功
			if (response.code === 200) {
				// 将登录数据存储到 localStorage
				localStorage.setItem('token', response.data);

				// 提示用户登录成功
				uni.showToast({
					title: '登录成功',
					icon: 'success',
				});

				// 切换到首页或其他页面
				uni.switchTab({
					url: '/pages/tabbar/tabbar-5/tabbar-5',  // 假设登录后跳转到主页
				});
			} else {
				// 登录失败
				uni.showToast({
					title: response.message || '登录失败',
					icon: 'none',
				});
			}
		} catch (error) {
			console.error('登录失败:', error);
			uni.showToast({
				title: '登录失败，请稍后再试',
				icon: 'none',
			});
		}
	};
	const startCountDown = () => {
		isCountingDown.value = true;
		const timer = setInterval(() => {
			if (countDown.value > 0) {
				countDown.value--;
				countDownText.value = `${countDown.value}s后重试`;
			} else {
				clearInterval(timer);
				isCountingDown.value = false;
				countDown.value = 60;
				countDownText.value = '获取验证码';
			}
		}, 1000);
	};

	const getVerificationCode = () => {
		if (!registerForm.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		startCountDown();
		console.log('发送验证码到手机：', registerForm.phone);
	};

	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>
	page {
		height: 100%;
	}

	.auth-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		padding: 0 40rpx;
	}

	.auth-header {
		margin-top: 100rpx;
		margin-bottom: 60rpx;
		width: 100%;
	}

	.tab-container {
		display: flex;
		justify-content: center;
		gap: 80rpx;
	}

	.tab-item {
		font-size: 20px;
		color: #999999;
		position: relative;
		padding: 20rpx 0;
	}

	.tab-item.active {
		color: #333333;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #007AFF;
		border-radius: 2rpx;
	}

	.auth-form {
		width: 100%;
	}

	.input-group {
		display: flex;
		align-items: center;
		height: 96rpx;
		padding: 0 32rpx;
		background: #f8f8f8;
		border-radius: 48rpx;
		margin-bottom: 32rpx;
	}

	.verification-group {
		padding-right: 0;
	}

	.input {
		flex: 1;
		height: 96rpx;
		margin-left: 20rpx;
		font-size: 14px;
	}

	.verification-input {
		margin-right: 20rpx;
	}

	.verification-btn {
		height: 96rpx;
		line-height: 96rpx;
		padding: 0 32rpx;
		font-size: 14px;
		color: #007AFF;
		background: transparent;
		border-left: 1px solid #EEEEEE;
		border-radius: 0;
	}

	.verification-btn::after {
		border: none;
	}

	.verification-btn[disabled] {
		color: #999999;
		background: transparent;
	}

	.placeholder {
		color: #999999;
		font-size: 14px;
	}

	.submit-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background: #007AFF;
		color: #ffffff;
		font-size: 16px;
		border-radius: 48rpx;
		margin: 48rpx 0;
	}

	.helper-links {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.link-text {
		color: #666666;
		font-size: 14px;
	}
</style>